

<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="font/iconfont.js"></script>
    <script src="js/index.js"></script>
    <title>briup搜索</title>
</head>

<body>
    <div class="layout">
        <div class="header">
            <div class="icon">
                <img src="img/logo_top.png" alt="">
            </div>
            <div class="bar">
                <form>
                    <input type="text" placeholder="请输入您要搜索的内容..." th:placeholder="${keyword}">
                    <button type="submit"></button>
                </form>
            </div>
        </div>
        <div id="container">
            <div class="search">
                <div>
                    <ul>
                        <li  th:each="page :${pages}">
                            <a th:href="${page.uri}" th:text="${page.title}"></a>
                            <div class="news-item">
                                <img th:if="${page.img!=null}" src="./aaa.png" alt="">
                                <div class="text">
                                    <p class="content">
                                        <span class="time">2022/12/16</span>
                                        i大家肥肉奥尔无法破案渴望，的撒娇就看斯拉夫斯基来得及啊立刻搭街坊，嗲交罚款福克斯的龙卷风
                                        ，但是大家解放军律师律师律师代理端口的开发经费句句参加，是到付即可大家都觉得大口大口的劳动力大量，回答是否划算会计法还是叫覅欸访问
                                        i的时间佛的上课了非常深刻的建安费如同多花时间会计法看风景十大富豪进口的分水岭咖啡加热
                                    </p>
                                    <a href="">Briup一下</a>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="hot">
                <div class="hot-title">
                    <h3>Briup热搜 ></h3>
                </div>
                <div>
                    <ol>
                        <li class="hot-item">
                            <a href="">hot News hot News hot News hot News hot News </a>
                        </li>
                        <li>
                            <a href="">hot News</a>
                        </li>
                        <li>
                            <a href="">hot News</a>
                        </li>
                        <li>
                            <a href="">hot News</a>
                        </li>
                        <li>
                            <a href="">hot News</a>
                        </li>
                        <li>
                            <a href="">hot News</a>
                        </li>
                        <li>
                            <a href="">hot News</a>
                        </li>
                        <li>
                            <a href="">hot News</a>
                        </li>
                        <li>
                            <a href="">hot News</a>
                        </li>
                        <li>
                            <a href="">hot News</a>
                        </li>
                        <li>
                            <a href="">hot News</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="footer">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="page-drop">

                <button id="drop-btn">
                    15/页
                    <span><i class="iconfont icon-xia_down"></i></span>
                </button>


                <ul id="drop-ul">
                    <li><a href="#">15/页</a></li>
                    <li><a href="#">20/页</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>